<template>
  <view class="package-list-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="iconfont icon-search">🔍</text>
        <input 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索体检套餐" 
          @input="handleSearch"
        />
      </view>
    </view>
	
	<!-- gyh -->

    <!-- 筛选条件 -->
    <view class="filter-bar">
      <view 
        class="filter-item" 
        :class="{ active: currentFilter === 'all' }"
        @click="setFilter('all')"
      >
        全部
      </view>
      <view 
        class="filter-item" 
        :class="{ active: currentFilter === 'male' }"
        @click="setFilter('male')"
      >
        男性专享
      </view>
      <view 
        class="filter-item" 
        :class="{ active: currentFilter === 'female' }"
        @click="setFilter('female')"
      >
        女性专享
      </view>
    </view>

    <!-- 套餐列表 -->
    <scroll-view 
      scroll-y 
      class="package-list"
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <view 
        class="package-item" 
        v-for="(item, index) in filteredPackages" 
        :key="index"
        @click="goToDetail(item)"
      >
        <image :src="item.img || '/static/images/checkup-default.jpg'" mode="aspectFill" class="package-image"></image>
        <view class="package-info">
          <text class="package-name">{{ item.name }}</text>
          <text class="package-desc">{{ item.remark || `适合${item.age}岁${item.sex === '0' ? '男女' : (item.sex === '1' ? '男' : '女')}性` }}</text>
          <view class="package-price">
            <text class="price">¥{{ item.price }}</text>
            <text class="original-price">¥{{ Math.floor(item.price * 1.2) }}</text>
          </view>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="loading-state" v-if="isLoading">
        <text>加载中...</text>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredPackages.length === 0 && !isLoading">
        <image src="/static/images/empty.png" mode="aspectFit"></image>
        <text>暂无相关套餐</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { setmealApi } from '@/api/setmeal'

export default {
  data() {
    return {
      packages: [], // 所有套餐数据
      searchKeyword: '', // 搜索关键词
      currentFilter: 'all', // 当前筛选条件
      isLoading: false, // 加载状态
      isRefreshing: false, // 下拉刷新状态
      page: 1, // 当前页码
      pageSize: 10 // 每页数量
    }
  },

  computed: {
    filteredPackages() {
      let result = this.packages

      // 搜索过滤
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase()
        result = result.filter(item => 
          item.name.toLowerCase().includes(keyword) ||
          item.remark?.toLowerCase().includes(keyword)
        )
      }

      // 性别过滤
      if (this.currentFilter === 'male') {
        result = result.filter(item => item.sex === '1')
      } else if (this.currentFilter === 'female') {
        result = result.filter(item => item.sex === '2')
      }

      return result
    }
  },

  onLoad() {
    this.loadPackages()
  },

  methods: {
    // 加载套餐数据
    async loadPackages() {
      if (this.isLoading) return

      try {
        this.isLoading = true
        const res = await setmealApi.getAllSetMeal()
        
        if (res.code === 200 && res.data) {
          // 转换数据格式
          const newPackages = res.data.map(pkg => ({
            id: pkg.id,
            name: pkg.name,
            remark: pkg.remark,
            sex: pkg.sex,
            age: pkg.age,
            price: pkg.price,
            img: pkg.img || '/static/images/checkup-default.jpg'
          }))

          // 如果是刷新或首次加载，直接替换数据
          if (this.page === 1) {
            this.packages = newPackages
          } else {
            // 如果是加载更多，则追加不重复的数据
            const existingIds = new Set(this.packages.map(p => p.id))
            const uniqueNewPackages = newPackages.filter(pkg => !existingIds.has(pkg.id))
            this.packages = [...this.packages, ...uniqueNewPackages]
          }

          // 如果没有新数据了，显示提示
          if (newPackages.length === 0) {
            uni.showToast({
              title: '没有更多数据了',
              icon: 'none'
            })
          }
        }
      } catch (error) {
        console.error('加载套餐列表失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
      }
    },

    // 搜索处理
    handleSearch() {
      // 重置页码并重新加载数据
      this.page = 1
      this.packages = []
      this.loadPackages()
    },

    // 设置筛选条件
    setFilter(filter) {
      this.currentFilter = filter
      // 重置页码并重新加载数据
      this.page = 1
      this.packages = []
      this.loadPackages()
    },

    // 跳转到详情页
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/checkup/detail?id=${item.id}`
      })
    },

    // 加载更多
    loadMore() {
      this.page++
      this.loadPackages()
    },

    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true
      this.page = 1
      this.packages = []
      await this.loadPackages()
      this.isRefreshing = false
    }
  }
}
</script>

<style lang="scss">
.package-list-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 20rpx;

  .search-bar {
    background: #fff;
    padding: 20rpx 30rpx;
    position: sticky;
    top: 0;
    z-index: 100;

    .search-input {
      display: flex;
      align-items: center;
      background: #f5f5f5;
      height: 72rpx;
      border-radius: 36rpx;
      padding: 0 30rpx;

      .icon-search {
        margin-right: 10rpx;
        font-size: 32rpx;
        color: #999;
      }

      input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
      }
    }
  }

  .filter-bar {
    display: flex;
    background: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
    position: sticky;
    top: 112rpx;
    z-index: 100;

    .filter-item {
      padding: 10rpx 30rpx;
      font-size: 28rpx;
      color: #666;
      border-radius: 26rpx;
      margin-right: 20rpx;
      background: #f5f5f5;

      &.active {
        color: #fff;
        background: #007AFF;
      }
    }
  }

  .package-list {
    height: calc(100vh - 232rpx);

    .package-item {
      margin: 20rpx;
      background: #fff;
      border-radius: 12rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);

      .package-image {
        width: 100%;
        height: 300rpx;
      }

      .package-info {
        padding: 20rpx;

        .package-name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 10rpx;
        }

        .package-desc {
          font-size: 26rpx;
          color: #666;
          margin-bottom: 16rpx;
        }

        .package-price {
          display: flex;
          align-items: baseline;

          .price {
            font-size: 36rpx;
            color: #ff4d4f;
            font-weight: bold;
          }

          .original-price {
            font-size: 24rpx;
            color: #999;
            text-decoration: line-through;
            margin-left: 10rpx;
          }
        }
      }
    }
  }

  .loading-state {
    text-align: center;
    padding: 30rpx;
    color: #999;
    font-size: 26rpx;
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 30rpx;

    image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 20rpx;
    }

    text {
      color: #999;
      font-size: 28rpx;
    }
  }
}
</style> 